<template>
  <div class="financialdetail">
    <p class="jsdetaillist">结算单明细列表</p>

    <div class="detailheader">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="supplierName" label="客户名称" />
        <el-table-column prop="auditor" label="发出人" />
        <el-table-column prop="sendDate" label="发出日期" />
        <el-table-column prop="ensureDate" label="确认日期" />
        <el-table-column prop="statementDate" label="结算日期" />
        <el-table-column prop="statementMan" label="结算人" />
        <el-table-column prop="payType" label="付款方式">
          <template slot-scope="scope">
            {{ scope.row.payType | payTypeFitlter }}
          </template>
        </el-table-column>
        <el-table-column prop="totalStatementPrice" label="结算金额" />
        <el-table-column prop="status" label="结算状态">
          <template slot-scope="scope">
            {{ scope.row.status | statusFitlter }}</template
          >
        </el-table-column>
        <el-table-column prop="ensureMan" label="确认人"> </el-table-column>
      </el-table>
    </div>

    <div class="btn">
      <el-button type="primary" class="account" @click="confirm()"
        >确认</el-button
      >
    </div>

    <div class="table">
      <el-table
        :data="Datadetail"
        border
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="statementId" label="结算单号"> </el-table-column>
        <el-table-column prop="goodsTypeNum" label="品种数量">
        </el-table-column>
        <el-table-column prop="totalWeight" label="总重量(斤)">
        </el-table-column>
        <el-table-column prop="totalStatementPrice" label="结算金额">
        </el-table-column>
        <el-table-column prop="checkDate" label="收货日期"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" @click="dedetail(scope.row.statementId)"
              >明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getStatementOfSupplier, confirmbtn } from "@/api/partner.js";
export default {
  filters: {
    statusFitlter(value) {
      if (value === 0) {
        return "待确认";
      } else if (value === 1) {
        return "已发送";
      } else if (value === 2)  {
        return "已结算";
      }else if (value === 3)  {
        return "已验收";
      }
    },

    payTypeFitlter: value => {
      return value === 1 ? "银行卡" : "现金";
    }
  },
  data() {
    return {
      tableData: [],
      Datadetail: [],
      // 选中按钮的订单编号集合
      statementIdList: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var sendDate = { sendDate: this.$route.query.sendDate };
      getStatementOfSupplier(sendDate).then(res => {
        console.log(res);
        this.Datadetail = res.rows;
        this.tableData = res.rows;
      });
    },
    // 确定按钮
    confirm() {
      if (this.statementIdList == "") {
        this.$message.error("请选择结算单数据");
      } else {
        var statementIdList = { statementIdList: this.statementIdList };
        confirmbtn(statementIdList).then(res => {
          console.log(res);
          if (res.code === 20000) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.init()
          }else{
            this.$message.error(res.msg)
          }
        });
      }
    },
    // 选择按钮时触发
    handleSelectionChange(val) {
      var arr = val.map(i => {
        return i.statementId;
      });
      this.statementIdList = arr;
      console.log(this.statementIdList);
    },
    dedetail(id) {
      this.$router.push({
        path: "statementde-detail",
        query: { statementId: id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.financialdetail {
  padding: 20px 20px;
  .jsdetaillist {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .btn {
    text-align: right;
    margin: 30px;
  }
}
</style>
